<script setup>
import { ref, watch } from "vue";

// 控制标签选项
let tabbarActive = ref(0);

// 监听路由变化改变顶部标题
let topTitle = ref("食谱大全");

watch(
  tabbarActive,
  (newValue) => {
    switch (newValue) {
      case 0:
        topTitle = "食谱大全";
        break;
      case 1:
        topTitle = "分类";
        break;
      case 2:
        topTitle = "更多功能";
        break;
    }
  },
  {
    immediate: true,
  }
);
</script>

<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar 
    :title="topTitle" 
    :fixed="true" 
    :placeholder="true"
    />
    <!-- 主要内容显示页 -->
    <main>
      <router-view></router-view>
    </main>
    <!-- 底部导航栏 -->
    <van-tabbar v-model="tabbarActive" route :placeholder="true">
      <van-tabbar-item to="/recipes-home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/recipes-sort" icon="list-switching"
        >分类</van-tabbar-item
      >
      <van-tabbar-item to="/more-feature" icon="more-o">更多</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style>
.van-nav-bar {
  --van-nav-bar-background: #e05601;
}

.van-nav-bar__title {
  --van-nav-bar-title-text-color: #fff;
}

.van-tabbar-item {
  color: #ccc;
}

.van-tabbar-item--active {
  color: black;
}
</style>
